<template>
  <div class="maincontent dsro">
    <el-tabs v-model="mainTab">
      <el-tab-pane label="基本信息" name="jbxx">
        <el-form
          class="basicInfoForm"
          :inline="true"
          label-position="left"
          :model="form"
          label-width="80px"
          ref="formData"
          :rules="formDataRules"
        >
          <div class="maintitle">项目基本情况</div>
          <div class="basicInfo">
            <div>
              <span class="tit">建设规模：</span>
              <span>{{projectData.constrPredictTotalArea}}公顷</span>
              <span class="tit">拟建成高标准基本农田面积：</span>
              <span>{{projectData.constrHighLevelFarmland}}公顷</span>
              <span class="tit">整理规模：</span>
              <span>{{projectData.constrPredictOrganizeArea}}公顷</span>
              <span class="tit">开发规模：</span>
              <span>{{projectData.constrPredictDevelopArea}}公顷</span>
            </div>
            <div>
              <span class="tit">新增耕地：</span>
              <span>{{projectData.constrPredictNewFarmland}}公顷</span>
              <span class="tit">新增整理耕地：</span>
              <span>{{projectData.constrPredictOrganizeFarmland}}公顷</span>
              <span class="tit">新增开发耕地：</span>
              <span>{{projectData.constrPredictDevelopFarmland}}公顷</span>
              <span class="tit">新增复垦耕地：</span>
              <span>{{projectData.constrPredictReclaimFarmland}}公顷</span>
            </div>
          </div>

          <div class="maintitle">预算投资金额</div>
          <div class="basicInfo">
            <div>
              <span class="tit">工程施工费：</span>
              <span>田间道路工程费：{{projectData.projectRoadCost}}万元</span>
              <span class="tit"></span>
              <span>土地平整工程费：{{projectData.projectLandLevelCost}}万元</span>
              <span class="tit"></span>
              <span>农田水利工程费：{{projectData.projectWaterWorksCost}}万元</span>
              <span class="tit"></span>
              <span>生态保护工程费：{{projectData.projectEcoProtectCost}}万元</span>
            </div>
            <div>
              <span class="tit">设备购置费：</span>
              <span>{{projectData.projectEquipmentCost}}万元</span>
              <span class="tit">不可预见费用：</span>
              <span>{{projectData.projectUnpredictableCost}}万元</span>
              <span class="tit">项目建设亩均投资：</span>
              <span>{{projectData.projectInvestmentPerMu}}万元</span>
              <span class="tit">新增耕地亩均投资：</span>
              <span>{{projectData.projectInvestmentFarmlandPerMu}}万元</span>
              <span class="tit">其他费用：</span>
              <span>{{projectData.projectOtherCost}}万元</span>
            </div>
            <div>
              <span class="tit">工程总投资：</span>
              <span>{{projectData.projectTotalInvestment}}万元</span>
            </div>
          </div>

          <div class="maintitle">市中心审查意见信息</div>
          <div class="formAllRow">
            <div>
              <el-form-item label="经办人审查意见" label-width="150px">
                <el-input
                  style="width:774px;"
                  v-model="form1.opinion"
                  :rows="4"
                  readonly
                  type="textarea"
                  value="同意"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px">
                <img style="width: 100px;" :src="`${baseUrl}${form1.signature}`" alt />
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px">
                <el-date-picker
                  v-model="form1.createTime"
                  readonly
                  type="datetime"
                  placeholder="审查日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见">
                <el-select disabled v-model="form1.status" placeholder="请选择">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <!-- <div class="formAllRow">
            <div>
              <el-form-item label="复核人审查意见" label-width="150px">
                <el-input
                  v-model="form2.opinion"
                  readonly
                  style="width:774px;"
                  :rows="4"
                  type="textarea"
                  value="同意"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px">
                <img style="width: 100px;" :src="`${baseUrl}${form2.signature}`" alt />
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px">
                <el-date-picker
                  v-model="form2.createTime"
                  type="datetime"
                  readonly
                  placeholder="审查日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见">
                <el-select disabled v-model="form2.status" placeholder="请选择">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>-->

          <div class="formAllRow">
            <div>
              <el-form-item label="处室负责人审查意见" label-width="150px">
                <el-input
                  v-model="form3.opinion"
                  style="width:774px;"
                  readonly
                  :rows="4"
                  type="textarea"
                  value="同意"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px">
                <img style="width: 100px;" :src="`${baseUrl}${form3.signature}`" alt />
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px">
                <el-date-picker
                  v-model="form3.createTime"
                  type="datetime"
                  readonly
                  placeholder="审查日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见">
                <el-select disabled v-model="form3.status" placeholder="请选择">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div class="formAllRow">
            <div>
              <el-form-item label="中心分管领导审查意见" label-width="170px" prop="opinion">
                <el-input
                  v-model="form.opinion"
                  style="width:774px;"
                  :rows="4"
                  type="textarea"
                  placeholder="请输入意见"
                  :readonly="isCurrentProcess"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px">
                <img style="width: 100px;" :src="`${baseUrl}${form.signature || signature}`" alt />
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px">
                <el-date-picker
                  v-model="form.createTime"
                  type="datetime"
                  placeholder="审查日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :readonly="isCurrentProcess"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见">
                <el-select v-model="form.status" placeholder="请选择" :disabled="isCurrentProcess">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div style="margin-top:60px;">
            <el-form-item>
              <el-button type="primary" v-if="!isCurrentProcess" @click="addAdvice">提交</el-button>
              <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="审查流程" name="sclc">
        <div class="processContainer">
          <process :processData="processData"></process>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import process from "../../feasibilityStudy/public/process";
import config from "@/config/index.js";
import moment from "moment";
import {
  getInvAndCon,
  getAdvice,
  addAdvice,
  getSignature
} from "@/api/plannDesignBudget/reviewOpinions.js";
import { validateNotNull } from "@/utils/validate.js";
export default {
  components: {
    process
  },
  data() {
    return {
      projectId: localStorage.getItem("projectId"),
      mainTab: "jbxx",
      form1: {
        signature: "",
        groupId: 8,
        projectId: localStorage.getItem("projectId"),
        type: 1,
        status: 0,
        opinion: "",
        createTime: ""
      },
      form2: {
        signature: "",
        groupId: 8,
        projectId: localStorage.getItem("projectId"),
        type: 2,
        status: 0,
        opinion: "",
        createTime: ""
      },
      form3: {
        signature: "",
        groupId: 8,
        projectId: localStorage.getItem("projectId"),
        type: 3,
        status: 0,
        opinion: "",
        createTime: ""
      },
      form: {
        signature: "",
        groupId: 8,
        projectId: localStorage.getItem("projectId"),
        type: 4,
        status: 0,
        opinion: "",
        createTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      },
      formDataRules: {
        opinion: [{ validator: validateNotNull, trigger: "blur" }]
      },
      processData: {
        groupId: 8,
        projectId: localStorage.getItem("projectId")
      },
      baseUrl: config.baseUrlImg,
      signature: "",
      projectData: {}
    };
  },

  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") ==
        "PLANNING_DESIGN_AND_BUDGETING_CITY_CENTER_4";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },

  created() {
    this.getInvAndCon();
    this.getAdvice();
    // this.getAdvice1();
    this.getAdvice2();
    this.getAdvice3();
    this.getSignature();
  },
  methods: {
    moment,
    getInvAndCon() {
      //获取项目投资和建设信息
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getInvAndCon({ projectId: this.projectId })
        .then(res => {
          loading.close();
          this.projectData = res.data;
        })
        .catch(res => {
          loading.close();
        });
    },
    getAdvice() {
      //获取经办人审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getAdvice({ projectId: this.projectId, groupId: 8, type: 1 })
        .then(res => {
          loading.close();
          if (res.data) {
            this.form1 = res.data;
          }
        })
        .catch(res => {
          loading.close();
        });
    },
    // getAdvice1() {
    //   //获取复核人审查意见
    //   const loading = this.$loading({
    //     lock: true,
    //     text: "Loading",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.7)"
    //   });
    //   getAdvice({ projectId: this.projectId, groupId: 8, type: 2 })
    //     .then(res => {
    //       loading.close();
    //       if (res.data) {
    //         this.form2 = res.data;
    //       }
    //     })
    //     .catch(res => {
    //       loading.close();
    //     });
    // },
    getAdvice2() {
      //获取处室负责人审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getAdvice({ projectId: this.projectId, groupId: 8, type: 3 })
        .then(res => {
          loading.close();
          if (res.data) {
            this.form3 = res.data;
          }
        })
        .catch(res => {
          loading.close();
        });
    },
    getAdvice3() {
      //获取中心分管领导审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getAdvice({ projectId: this.projectId, groupId: 8, type: 4 })
        .then(res => {
          loading.close();
          if (res.data) {
            this.form = res.data;
          }
        })
        .catch(res => {
          loading.close();
        });
    },
    addAdvice() {
      //生成审查意见表
      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          this.form.signature = this.signature;
          this.form.projectId = this.projectId;
          addAdvice(this.form)
            .then(res => {
              loading.close();
              this.$message({
                message: "提交成功！",
                type: "success"
              });
              this.$router.push("/projectManagement/planningStage/dealwith");
            })
            .catch(res => {
              loading.close();
            });
        }
      });
    },
    getSignature() {
      //获取用户签名
      getSignature().then(res => {
        this.signature = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.dsro {
  /deep/ .el-tabs__content {
    overflow: unset;
  }
  /deep/ .el-tabs__header {
    background: #fff;
    height: 46px;
    padding: 0 20px;
    /deep/ .el-tabs__item {
      height: 36px;
      line-height: 36px;
      margin-top: 10px;
      padding: 0 10px;
    }
    /deep/ .el-tabs__nav-wrap::after {
      width: 0;
    }
  }
  .basicInfoForm {
    /deep/ .el-form-item__content {
      padding-right: 60px;
    }
    /deep/ .el-form-item__label {
      color: #666;
      text-align: right;
    }
    .basicSituation {
      /deep/ .el-form-item__label {
        color: #666;
        text-align: left;
        padding: 0;
      }
    }
    /deep/ .el-input__suffix-inner {
      color: #8c8c8c;
      i {
        font-style: normal;
      }
    }
    .labelNormal {
      label {
        font-weight: normal;
        color: #a6a6a6;
        font-size: 13px;
      }
    }
    .equalArea {
      /deep/ .el-form-item__content {
        padding-right: 20px;
      }
    }
  }
  .formAllRow {
    /deep/ .el-form-item__content .el-textarea .el-textarea__inner {
      width: 1170px;
      max-width: calc(100vw - 320px - 60px);
    }
    /deep/ .el-form-item__label {
      display: block;
      text-align: left;
      margin-top: 15px;
    }
    /deep/ .el-form-item {
      width: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
.processContainer {
  background: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  height: calc(100vh - 120px);
}
.maincontent {
  height: calc(100vh - 114px);
  padding: 30px;
  overflow: auto;
  background: #f5f6f7;
  .basicInfoForm {
    background: #fff;
    padding: 20px;
  }
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
    margin-top: 60px;
    margin-bottom: 30px;
    &:first-child {
      margin-top: 0;
    }
  }
  .basicInfoForm {
    span {
      display: inline-block;
      margin: 20px 60px 0 0;
      font-size: 14px;
      color: #999999;
    }
    .tit {
      color: #666666;
      font-weight: bold;
      margin-right: 0;
      height: 40px;
      line-height: 40px;
      margin: 0;
    }
    .basicSituation {
      margin-top: 20px;
    }
  }
  .equalArea div .tit:nth-of-type(2n) {
    margin-left: 40px;
  }
  .formcontent {
    margin-top: 30px;
  }
  .secondtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    margin-right: 20px;
    line-height: 38px;
  }
}
</style>

